<template>
	<b-container class="app">
		<b-row>
			<b-col v-for="(item,key) in data" :key="key">
				<dt>{{item.title}}</dt>
				<ul>
					<li v-for="(i, k) in item.menu" :key="k"><a href="#">{{i}}</a></li>
				</ul>
			</b-col>
		</b-row>

		<div class="desc">
			<div class="images">
				<img :src="qqICon" alt=""><img :src="share" alt="">
			</div>
			<div class="container">
				<li><a href="#"></a>服务条款</li>
				<li><a href="#"></a>隐私政策</li>
				<li><a href="#"></a>服务水平协议</li>
				<li><a href="#"></a>《中华人民共和国电信业务经营许可证》A2.B1-20181820</li>
			</div>
		</div>
	</b-container>
</template>

<script>
	export default {
		name: "Footer",
		data () {
			return {
				qqICon: require('../../assets/Path.png'),
				share: require('../../assets/Shape.png'),
				data: [
					{
						title: '花卷科技',
						menu: [
							'产品文档',
							'价格'
						]
					},
					{
						title: '产品',
						menu: [
							'优势特性',
							'SD-WAN',
							'IPLC 专线',
							'游戏加速',
							'代理分销'
						]
					},
					{
						title: '公司',
						menu: [
							'联系我们',
							'关于花卷',
							'工作机会',
							'博客'
						]
					},
					{
						title: '客户支持',
						menu: [
							'故障申报',
							'帮助中心',
							'服务状态',
							'提交 BUG'
						]
					}
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.app {
		border-top: 1px solid #979797;
		text-align: center;
		padding: 100px 0 40px 0;

		.row {
			text-align: center;

			.col {
				dt {
					font-size: 21px;
				}

				ul {
					margin-top: 30px;

					li {
						line-height: 40px;

						a {
							color: #000;
							font-size: 16px;
						}
					}
				}
			}
		}
		.desc {
			display: flex;
			margin-top: 40px;
			.images {
				width: 30%;
				img {
					margin-right: 40px;
					display: inline-block;
				}
			}
			.container {
				display: flex;
				li:first-child {
					list-style-type: none;
				}
				li {
					list-style-type: disc;
					margin-left: 20px;
				}
			}
		}
	}
</style>
